/**
 * 网络错误组件样式
 * @description 自定义网络错误组件的样式定义
 */

.networkError {
  /* 基础样式 */
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: #fafafa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* 不同状态的样式 */
.networkError.online {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
}

.networkError.connecting {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.networkError.failed,
.networkError.offline {
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
}

/* Result组件样式覆盖 */
.networkError :global(.ant-result) {
  padding: 24px 32px;
}

.networkError :global(.ant-result-icon) {
  margin-bottom: 24px;
}

.networkError :global(.ant-result-title) {
  color: #262626;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.networkError :global(.ant-result-subtitle) {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.networkError :global(.ant-result-extra) {
  margin-top: 24px;
}

/* 网络检测信息 */
.networkDetection {
  margin-top: 24px;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  min-width: 280px;
}

.networkError.online .networkDetection {
  background-color: #f6ffed;
  border-color: #b7eb8f;
}

.networkError.connecting .networkDetection {
  background-color: #e6f7ff;
  border-color: #91d5ff;
}

.networkError.failed .networkDetection,
.networkError.offline .networkDetection {
  background-color: #fff2f0;
  border-color: #ffccc7;
}

/* 重试信息 */
.retryInfo {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  min-width: 280px;
  text-align: center;
}

.retryInfo :global(.ant-progress) {
  margin-top: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .networkError {
    min-height: 300px;
    padding: 24px 16px;
  }

  .networkError :global(.ant-result) {
    padding: 16px 20px;
  }

  .networkError :global(.ant-result-icon .anticon) {
    font-size: 48px !important;
  }

  .networkError :global(.ant-result-title) {
    font-size: 18px;
  }

  .networkError :global(.ant-result-subtitle) {
    font-size: 13px;
  }

  .networkDetection,
  .retryInfo {
    min-width: auto;
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .networkError {
    min-height: 250px;
    padding: 20px 12px;
  }

  .networkError :global(.ant-result) {
    padding: 12px 16px;
  }

  .networkError :global(.ant-result-icon .anticon) {
    font-size: 40px !important;
  }

  .networkError :global(.ant-result-title) {
    font-size: 16px;
  }

  .networkError :global(.ant-result-subtitle) {
    font-size: 12px;
  }

  .networkDetection {
    padding: 12px;
  }

  .retryInfo {
    padding: 10px 12px;
  }
}

/* 深色主题适配 */
[data-theme='dark'] .networkError {
  background-color: #1f1f1f;
}

[data-theme='dark'] .networkError.online {
  background-color: #162312;
  border-color: #274916;
}

[data-theme='dark'] .networkError.connecting {
  background-color: #111b26;
  border-color: #153450;
}

[data-theme='dark'] .networkError.failed,
[data-theme='dark'] .networkError.offline {
  background-color: #2a1215;
  border-color: #58181c;
}

[data-theme='dark'] .networkError :global(.ant-result-title) {
  color: #d9d9d9;
}

[data-theme='dark'] .networkError :global(.ant-result-subtitle) {
  color: #8c8c8c;
}

[data-theme='dark'] .networkDetection,
[data-theme='dark'] .retryInfo {
  background-color: #262626;
  border-color: #434343;
}

[data-theme='dark'] .networkError.online .networkDetection {
  background-color: #162312;
  border-color: #274916;
}

[data-theme='dark'] .networkError.connecting .networkDetection {
  background-color: #111b26;
  border-color: #153450;
}

[data-theme='dark'] .networkError.failed .networkDetection,
[data-theme='dark'] .networkError.offline .networkDetection {
  background-color: #2a1215;
  border-color: #58181c;
}

/* 动画效果 */
.networkError {
  animation: networkErrorFadeIn 0.5s ease-out;
}

@keyframes networkErrorFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 状态图标动画 */
.networkError.connecting :global(.ant-result-icon .anticon) {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.networkError.online :global(.ant-result-icon .anticon) {
  animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.networkError.failed :global(.ant-result-icon .anticon),
.networkError.offline :global(.ant-result-icon .anticon) {
  animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* 网络检测信息动画 */
.networkDetection {
  animation: slideInUp 0.3s ease-out 0.2s both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 重试信息动画 */
.retryInfo {
  animation: slideInUp 0.3s ease-out 0.4s both;
}

/* 按钮悬停效果 */
.networkError :global(.ant-btn) {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.networkError :global(.ant-btn::before) {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.networkError :global(.ant-btn:hover::before) {
  width: 100%;
  height: 100%;
}

/* 进度条样式 */
.retryInfo :global(.ant-progress-bg) {
  transition: width 1s linear;
}

/* 状态指示器 */
.networkError::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff4d4f;
  animation: statusBlink 2s ease-in-out infinite;
}

.networkError.online::before {
  background-color: #52c41a;
}

.networkError.connecting::before {
  background-color: #1890ff;
  animation: statusPulse 1s ease-in-out infinite;
}

@keyframes statusBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes statusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* 紧凑模式 */
.networkError.compact {
  min-height: 200px;
  padding: 20px 16px;
}

.networkError.compact :global(.ant-result) {
  padding: 12px 16px;
}

.networkError.compact .networkDetection,
.networkError.compact .retryInfo {
  margin-top: 12px;
  padding: 8px 12px;
}

/* 全屏模式 */
.networkError.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  min-height: 100vh;
  border-radius: 0;
  background-color: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(8px);
}

[data-theme='dark'] .networkError.fullscreen {
  background-color: rgba(31, 31, 31, 0.95);
}

/* 简洁模式 */
.networkError.simple .networkDetection,
.networkError.simple .retryInfo {
  display: none;
}

.networkError.simple {
  min-height: 200px;
}